// 进度条轮播图
import { useEffect, useRef, useState } from "react";
import { Progress, Carousel } from "antd";
import "./ImageSlider.css";

const items = [
    {
        id: 1,
        title: "金融",
        imgs: "https://cdn.dancf.com/fe-assets/20231128/enterprise-cases-mobile/255ce77a80557552d2ff520ef3881fca.jpg?x-oss-process=image/quality,q_80/interlace,1",
    },
    {
        id: 2,
        title: "生鲜",
        imgs: "https://cdn.dancf.com/fe-assets/20231128/enterprise-cases-mobile/6d27250d69c23ebe38e1a49fc3b362ac.jpg?x-oss-process=image/quality,q_80/interlace,1",
    },
    {
        id: 3,
        title: "家居",
        imgs: "https://cdn.dancf.com/fe-assets/20231128/enterprise-cases-mobile/0a727808dfb325a46d84e3b2a91df617.jpg?x-oss-process=image/quality,q_80/interlace,1",
    },
    {
        id: 4,
        title: "科技",
        imgs: "https://cdn.dancf.com/fe-assets/20231128/enterprise-cases-mobile/339929b5ee02f7cf40cab446ed29883c.jpg?x-oss-process=image/quality,q_80/interlace,1",
    },
    {
        id: 5,
        title: "媒体",
        imgs: "https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/9e040b3fa2e364567fb162480215facf.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1",
    },
    {
        id: 6,
        title: "家电",
        imgs: "https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/9102d74748aaa49c221ae1847996ee62.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1",
    },
    {
        id: 7,
        title: "电商",
        imgs: "https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/6b673d2ef32ac946904edf2db06389ac.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1",
    },
    {
        id: 8,
        title: "文化",
        imgs: "https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/f17f80c2ebadae96c1fadf01713dd195.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1",
    },
    {
        id: 9,
        title: "地产",
        imgs: "https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/44b1544837dfabe1fd3cf773d5761e7d.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1",
    },
];

const ImageSlider = () => {
    const [selectedId, setSelectedId] = useState(items[0]?.id);
    const carouselRef = useRef<any>(null); // 创建对 Carousel 的引用
    const [percent, setPercent] = useState(0);
    const [autoplays, setAutoplay] = useState(false);

    const handleCarouselChange = (current: any) => {
        const currentItem = items[current];
        if (currentItem) {
            setSelectedId(currentItem.id); // 更新选中的 id
            setPercent(0); // 重置进度条
        }
    };

    const click = (id: number) => {
        if (carouselRef.current) {
            carouselRef.current.goTo(id - 1);
        }
    };

    useEffect(() => {
        const targetPercent = 100;
        const duration = 1000; // 持续时间为1秒
        const increment = Math.ceil(targetPercent - percent) / (duration / 100); // 每次增加的百分比

        const interval = setInterval(() => {
            setPercent((prev) => {
                const newPercent = Math.min(Math.fround(prev + increment), targetPercent); // 确保不超过目标值

                if (newPercent >= targetPercent) {
                    clearInterval(interval); // 达到目标时清除定时器
                }

                if (newPercent >= 98) {
                    setAutoplay(true);
                } else {
                    setAutoplay(false);
                }
                return newPercent;
            });
        }, 100); // 每100毫秒更新一次

        return () => clearInterval(interval); // 清除定时器
    }, [percent]);

    return (
        <div className="ex_box">
            <div className="ex_title">
                与众多优秀品牌 <br /> 共创营销数字化转型新实践
            </div>
            <div className="ex_item">
                {items.map((item, index) => {
                    const isActive = selectedId === item.id; // 比较 id
                    return (
                        <div
                            onClick={() => {
                                click(item.id);
                            }}
                            className={` ${isActive ? "ex_gao" : "ex_text"}`}
                            key={index}
                        >
                            <div>{item.title}</div>
                            <div
                                style={{ display: isActive ? "block" : "none", marginTop: -10 }}
                            >
                                <Progress
                                    showInfo={false}
                                    size={[40, 3]}
                                    percent={Math.round(percent)}
                                />
                            </div>
                        </div>
                    );
                })}
            </div>
            <div className="ex_itemimg">
                <Carousel
                    dots={false}
                    autoplay={autoplays}
                    autoplaySpeed={600}
                    afterChange={handleCarouselChange}
                    ref={carouselRef}
                >
                    {items.map((item, index) => {
                        return (
                            <div key={index}>
                                <div className="ex_imgs">
                                    <img src={item.imgs} alt="" />
                                </div>
                            </div>
                        );
                    })}
                </Carousel>
            </div>
        </div>
    );
};

export default ImageSlider;
